import React, { Component } from 'react'
import Add from './add'
import List from './list'
import Home from './home'
import './app.css'
import { BrowserRouter as Router, Routes, Route, NavLink } from 'react-router-dom'


// imrd
class Myapp extends Component {
  render() {
    return (
      // <Router>
      <div>
        <NavLink to='/' className={({ isActive }) => isActive ? "red" : ""}  >首页 </NavLink> &nbsp;&nbsp;
        <NavLink to='/add' className={({ isActive }) => isActive ? "red" : ""}  >add</NavLink>  &nbsp;&nbsp;
        <NavLink to='/list' className={({ isActive }) => isActive ? "red" : ""}  >list</NavLink>  &nbsp;&nbsp;
        <Routes>
          {/* exact 精确匹配 */}
          <Route path='/' exact element={<Home></Home>}></Route>
          <Route path='/add' element={<Add></Add>}></Route>
          <Route path='/list' element={<List></List>}></Route>
          {/*react-router-dom v5 默认页设置<Redirect to="/index"></Redirect>*/}
          {/* react-router-dom v6 默认页设置 */}
          {/* <Route element={<Navigate to="/index" />}></Route> */}

        </Routes>
      </div>
      // </Router>
    )
  }
}
export default Myapp
